<template>
  <div>
    <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
      <Menu active-name theme="dark" width="auto" :open-names="['3']">
        <Submenu :name="`${index+1}`" v-for="(item,index) in meuns" :key="index">
          <template slot="title">
            <Icon :type="item.icon"></Icon>
            {{item.title}}
          </template>

          <MenuItem
            :name="`${index + 1}-${subIndex + 1}`"
            v-for="(subItem, subIndex) in item.group"
            :key="subIndex"
          >
            <router-link :to="subItem.path" :style="{color:'#fff'}">{{subItem.title}}</router-link>
          </MenuItem>
        </Submenu>
      </Menu>
    </Sider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      meuns: [
        {
          icon: "md-list",
          title: "购物商场",
          group: [
            { path: "/admin/goods-list", title: "商品列表" },
            { path: "/admin/category-list", title: "商品管理" }
          ]
        },
        {
          icon: "md-person",
          title: "会员管理",
          group: [{ path: "/admin/account-list", title: "会员列表" }]
        },
        {
          icon: "md-cart",
          title: "商城订单",
          group: [{ path: "/admin/order-list", title: "订单管理" }]
        }
      ]
    };
  }

};
</script>

<style>
.ivu-drawer-content{
  background: #3d4555;
}
.ivu-drawer-body{
  padding: 66px !important;

}
</style>
